<div class="exam-container">
    <audio src="../../assets/fail.mp3" style="display: none" id="failAudio">
    </audio>
    <audio src="../../assets/jump.mp3" style="display: none" id="jumpAudio">
    </audio>
    <audio src="../../assets/success.mp3" style="display: none" id="successAudio">
    </audio>
    <div class="exam-header">
        趣味条令条例考试
    </div>
    <!-- <span class="save-exit">保存退出</span> -->
    <div class="exam-question">

        <div class="float-left exam-question-left">
            <div class="exam-question-title">
                <div ng-class="{'show-content':showSelects,'hide-content':!showSelects}">
                    <div ng-class="{'show-content':showSelects,'hide-content':!showSelects}">题目：({{question.type}}) {{question.title}}</div>
                    <div ng-repeat="item in question.options" class="single-select-item">
                        {{item}}
                    </div>
                </div>
            </div>
            <div class="exam-question-answer">
                <div ng-class="{'show-content':showSelects,'hide-content':!showSelects}">
                    <div ng-if="question.type=='单选题'&&showSelects" class="question-answers">
                        <img src="../../img/Man.png" class="man-body" ng-class="getCurrentManPosition()" />
                        <img src="../../img/A.png" class="special-image A-position" ng-click="setValue('A')" />
                        <img src="../../img/B.png" class="B-position" ng-click="setValue('B')" />
                        <img src="../../img/C.png" class="C-position" ng-click="setValue('C')" />
                        <img src="../../img/D.png" class="D-position" ng-click="setValue('D')" />
                        <img src="../../img/first.png" class="first-station first-position" />
                    </div>
                    <div ng-if="question.type=='多选题'&&showSelects" class="question-answers">
                        <img src="../../img/Man.png" class="man-body" ng-class="getCurrentMulManPosition('A')" />
                        <img src="../../img/Man.png" class="man-body" ng-class="getCurrentMulManPosition('B')" />
                        <img src="../../img/Man.png" class="man-body" ng-class="getCurrentMulManPosition('C')" />
                        <img src="../../img/Man.png" class="man-body" ng-class="getCurrentMulManPosition('D')" />
                        <img src="../../img/A.png" class="special-image A-position" ng-click="setMulValue('A')" />
                        <img src="../../img/B.png" class="B-position" ng-click="setMulValue('B')" />
                        <img src="../../img/C.png" class="C-position" ng-click="setMulValue('C')" />
                        <img src="../../img/D.png" class="D-position" ng-click="setMulValue('D')" />
                        <img src="../../img/first.png" class="first-station first-position" />
                    </div>
                    <div ng-if="question.type=='判断题'&&showSelects" class="question-answers">
                        <img src="../../img/Man.png" class="man-body" ng-class="getCurrentManPosition()" />
                        <img src="../../img/A.png" class="special-image A-position" ng-click="setValue('A')" />
                        <img src="../../img/B.png" class="B-position" ng-click="setValue('B')" />
                        <img src="../../img/first.png" class="first-station first-position" />
                    </div>
                </div>

                <button class="next-question" ng-click="nextQuestionAction()">
                    下一题
                </button>
            </div>
        </div>
        <div class="float-left exam-question-right">
            <div class="exam-user">
                <div>
                    部职别：{{ministryDuty}}
                </div>
                <div>
                    姓名：{{username}}
                </div>
            </div>
            <div class="exam-time">
                <div>
                    倒计时：
                    <span ng-class="{'font-red':question.remainingTime<=300000}">{{question.timeStr}}
                    </span>
                </div>
                <div>
                    分数：
                    <span>{{question.currentScore}}
                    </span>
                </div>
            </div>
            <div class="exam-blood">
                <div>
                    血量：
                </div>
                <div class="exam-blood-line">
                    <div class="blood-outer">
                        <div class="blood-inner" ng-style="bloodStyle" ng-class="{'progress-bar-success':(question.remainingBlood/question.totalBlood)>=0.6,'progress-bar-danger':(question.remainingBlood/question.totalBlood)<0.6}"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="loading-container" ng-show="showLoading">
    <div class="spinner active circle-middle">
        <div class="spinner-layer layer-1">
            <div class="circle-clipper left"></div>
            <div class="circle-clipper right"></div>
        </div>
        <div class="spinner-layer layer-2">
            <div class="circle-clipper left"></div>
            <div class="circle-clipper right"></div>
        </div>
        <div class="spinner-layer layer-3">
            <div class="circle-clipper left"></div>
            <div class="circle-clipper right"></div>
        </div>
        <div class="spinner-layer layer-4">
            <div class="circle-clipper left"></div>
            <div class="circle-clipper right"></div>
        </div>
    </div>
</div>